<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>0725</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			body{
				padding: 50px 0;
			}
			img{
				width: 100%;
			}
			.damu-container img{
				width: auto;
			}
			.damu-carousel{
				height: 500px;
				overflow: hidden;
			}
			.damu-carousel .carousel-inner .item img{
				width: 100%;
			}
			@media only screen and (max-width:768px ) {
				.damu-carousel{
					height: 200px;
				}
			}
			
			
			
			.damu-container{
				margin-top: 50px;
			}
			.damu-row{
				text-align: center;
			}
			
			.damu-container2{
				padding: 50px 0;
			}
			
			#damu-tab .tab-pane span{
				font-size: 22px;
			}
			#damu-tab .tab-pane h2 span{
				font-size: inherit;
				color: gray;
			}
			
			footer{
				margin-top: 50px;
			}
			footer span{
				color: gray;
			}
			
			
		</style>
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	<!--导航-->
		<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
			  <div class="container">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <a class="navbar-brand" href="#">现代浏览器博物馆</a>
			    </div>
			
			    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			      <ul class="nav navbar-nav">
			        <li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li>
			        <li><a href="#">简述</a></li>
			        <li class="dropdown">
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点 <span class="caret"></span></a>
			          <ul class="dropdown-menu" id="damu-nav">
			            <li><a href="#Chrome">Chrome</a></li>
			            <li><a href="#Firefox">Firefox</a></li>
			            <li><a href="#Safari">Safari</a></li>
			            <li><a href="#Opera">Opera</a></li>
			            <li><a href="#IE">IE</a></li>
			          </ul>
			        </li>
			     		<li><a href="#" data-toggle="modal" data-target=".modal-1">关于</a></li>
			      </ul>
			    </div>
			  </div>
			</nav>
    <!--轮播图   data-interval="1000" data-pause = "hover" data-wrap="false" data-keyboard="true"-->
    <div id="carousel-example-generic" class="damu-carousel carousel slide" data-ride="carousel" >
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
			  </ol>
			
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="images/chrome-big.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/firefox-big.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/opera-big.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/safari-big.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/ie-big.jpg" alt="...">
			      <div class="carousel-caption">
			        ...
			      </div>
			    </div>
			  </div>
			
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
	</div>
    <!--三列布局-->
    <div class="container damu-container">
    	<div class="row damu-row">
    		<div class="col-md-4 " >
			      <img src="images/chrome-logo-small.jpg" >
			      <div class="caption">
			        <h3>Chrome</h3>
			        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
			        <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
			      </div>
    		</div>
    		<div class="col-md-4">
    			  <img src="images/firefox-logo-small.jpg" >
			      <div class="caption">
			        <h3>Firefox</h3>
			        <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。。</p>
			        <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
			      </div>
    		</div>
    		<div class="col-md-4">
    			  <img src="images/safari-logo-small.jpg" >
			      <div class="caption">
			        <h3>Safari</h3>
			        <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
			        <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
			      </div>
    		</div>
    	</div>
    </div>
    <!--线-->
    <div class="container damu-container2">
    	<hr />
    </div>
    <!--标签页-->
		<div class="container" id="damu-tab">
		  <ul class="nav nav-tabs" role="tablist" id="damu-list">
		    <li role="presentation" class="active"><a href="#Chrome" aria-controls="home" role="tab" data-toggle="tab">Chrome</a></li>
		    <li role="presentation"><a href="#Firefox" aria-controls="profile" role="tab" data-toggle="tab">Firefox</a></li>
		    <li role="presentation"><a href="#Safari" aria-controls="messages" role="tab" data-toggle="tab">Safari</a></li>
		    <li role="presentation"><a href="#Opera" aria-controls="settings" role="tab" data-toggle="tab">Opera</a></li>
		    <li role="presentation"><a href="#IE" aria-controls="settings" role="tab" data-toggle="tab">IE</a></li>
		  </ul>
		
		  <div class="tab-content" id="damu-tab">
		    <div role="tabpanel" class="tab-pane active" id="Chrome">
		    	<div class="container">
		    		<div class="row">
		    			<div class="col-md-7">
		    				<h2>IE <span>你懂的</span></h2>
							<span>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</span>
		    			</div>
		    			<div class="col-md-5">
		    				<img src="images/chrome-logo.jpg" />
		    			</div>
		    		</div>
		    	</div>
		    </div>
		    <div role="tabpanel" class="tab-pane" id="Firefox">
		    	<div class="container">
		    		<div class="row">
		    			<div class="col-md-5">
		    				<img src="images/firefox-logo.jpg" />
		    			</div>
		    			<div class="col-md-7">
		    				<h2>IE <span>你懂的</span></h2>
							<span>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</span>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		    <div role="tabpanel" class="tab-pane" id="Safari">
		    	<div class="container">
		    		<div class="row">
		    			<div class="col-md-7">
		    				<h2>IE <span>你懂的</span></h2>
							<span>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</span>
		    			</div>
		    			<div class="col-md-5">
		    				<img src="images/safari-logo.jpg" />
		    			</div>
		    		</div>
		    	</div>
		    </div>
		    <div role="tabpanel" class="tab-pane" id="Opera">
		    	<div class="container">
		    		<div class="row">
		    			<div class="col-md-5">
		    				<img src="images/opera-logo.jpg" />
		    			</div>
		    			<div class="col-md-7">
		    				<h2>IE <span>你懂的</span></h2>
							<span>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</span>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		    <div role="tabpanel" class="tab-pane" id="IE">
		    	<div class="container">
		    		<div class="row">
		    			<div class="col-md-7">
		    				<h2>IE <span>你懂的</span></h2>
							<span>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</span>
		    			</div>
		    			<div class="col-md-5">
		    				<img src="images/ie-logo.jpg" />
		    			</div>
		    		</div>
		    	</div>
		    </div>
		  </div>
		</div>
    <!--脚-->
    <footer class="container">
    	<span>&copy;尚硅谷</span>
    </footer>
    
    
    <!--模态框-->
    <div class="modal fade modal-1" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">Modal title</h4>
		      </div>
		      <div class="modal-body">
		        <p>One fine body&hellip;</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		      </div>
		    </div>
		  </div>
		</div>
    
    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
			$(function(){
				
				$("#damu-nav li a").click(function(e){
					var href = $(this).attr("href");
					$(document).scrollTop($("#damu-tab").offset().top-100);
					$("#damu-list li a[href="+href+"]").tab("show");
					e.preventDefault();
				})
				
				
			   $('.carousel').carousel({
				  interval: 3000,
				  pause:null,
				  wrap:true
				})
			    
			    $(".damu-pause").click(function(){
			    	 $('.carousel').carousel('pause');
			    })
			    $(".damu-start").click(function(){
			    	 $('.carousel').carousel('cycle');
			    })
			    
		     //代表每次轮播执行的执行触发
		     $('.carousel').on("slide.bs.carousel",function(){
//			     	console.log("carousel1");
		     })
		     //代表轮播每次过渡完成的时候触发
		     $('.carousel').on("slid.bs.carousel",function(){
//			     	console.log("carousel2");
		     })
			})
    </script>
  </body>
</html>